<template>
	<view class="content">
		<!--<view class="order-nav">
			<text :class="navIndex==0?'order-act':''" @click="checkIndex(0)">微信</text>
			<text :class="navIndex==1?'order-act':''" @click="checkIndex(1)">支付宝</text>
			<text :class="navIndex==2?'order-act':''" @click="checkIndex(2)">银行卡</text>
		</view>-->
		
		<block v-if="navIndex==0">
			<view class="with-con">
				<view class="place-rem-tit">
					<text>提现金额</text>
					<text></text>
				</view>
				<view class="with-input">
					<view class="with-input-con">
						<input type="number" value="" placeholder="请输入提现金额" />
					</view>
					<view class="with-pri">
						<text>可提现金额:￥88</text>
						<text>全部提现</text>
					</view>
					<view class="with-tips">最低提现金额:<text>10</text></view>
					<view class="with-btn">
						<text>提现</text>
					</view>
				</view>
			</view>			
		</block>
		
		<block v-if="navIndex==1">
			<view class="place-addr iconfont" @tap="goAlipay()" v-if="is_open_account == 1">
			    <block v-if="Object.keys(bind_bank).length <= 0">
					<view class="place-name1">
						<text>添加支付宝账号提现</text>
					</view>
				</block>
				<block v-else>
					<view class="place-name">
						<text>支付宝</text>
					</view>
					<view class="place-addr-con">
						<text>{{bind_bank.bank_accounts}}</text>
					</view>
			    </block>
			</view>
					
			<view class="with-con">
				<view class="place-rem-tit">
					<text>提现金额</text>
					<text></text>
				</view>
				<view class="with-input">
					<view class="with-input-con">
						<input type="digit" v-model="apply_money" placeholder="请输入提现金额" />
					</view>
					<view class="with-pri">
						<text>可提现金额:￥{{money}}</text>
						<text @click="totalCash">全部提现</text>
					</view>
					<view class="with-tips">最低提现金额:<text>{{low_cash}}</text>,<br>提现扣除0.6%手续费,到账金额以实际到账为准</view>
					<view class="with-btn">
						<text @click="applyCashFun">提现</text>
					</view>
				</view>
			</view>			
		</block>
		
		<block v-if="navIndex==2">
			<view class="place-addr place-card iconfont" @tap="goBankcard()">
			<!-- 		
						<view class="place-name1">
							<text>添加银行卡提现</text>
						</view>
			-->
			<!---->
						<view class="place-name">
							<text>招商银行</text>
						</view>
						<view class="place-addr-con">
							<text>6222****66666</text>
						</view>
			
			</view>
							
			<view class="with-con">
				<view class="place-rem-tit">
					<text>提现金额</text>
					<text></text>
				</view>
				<view class="with-input">
					<view class="with-input-con">
						<input type="number" value="" placeholder="请输入提现金额" />
					</view>
					<view class="with-pri">
						<text>可提现金额:￥88</text>
						<text>全部提现</text>
					</view>
					<view class="with-tips">最低提现金额:<text>10</text></view>
					<view class="with-btn">
						<text>提现</text>
					</view>
				</view>
			</view>			
		</block>
		
		<navigator url="../my/record" class="record-btn">提现记录</navigator>
	</view>
</template>

<script>
const app = getApp();
const request = require('../../utils/request');
export default {
    data() {
        return {
			navIndex:1,
			//技师提现收款账户信息
			bind_bank:{},
			//技师可提现金额
			money:0,
			//最低提现金额
			low_cash:0,
			
			//技师申请提现金额
			apply_money:'',
			
			//是否显示账户
			is_open_account:0
        }
    },
	onLoad()
	{
		
	},
	onShow()
	{
		var that = this;
		that.load_cash_init(); //获取技师提现初始信息
	},
    methods: {
		checkIndex(index){
			this.navIndex=index;
		},
		// 支付宝
		goAlipay(){
	        uni.navigateTo({
	            url: '/pages/my/alipay'
	        })
	    },
		// 银行卡
		goBankcard(){
	        uni.navigateTo({
	            url: '/pages/my/bankcard'
	        })
	    },
	    /**
		 * 获取技师提现初始化信息
		 */
		load_cash_init:function()
		{
			var that = this;
			//网络请求
			request(app.globalData.api_url+'/v1/moneycash/init', 'POST', {}).then((res) => {
				if(res.data.code == 0)
				{
					let data = res.data.data;
					//console.log(data);
					that.bind_bank = data.bind_bank ? data.bind_bank : {};
					that.money = data.money;
					that.low_cash = data.low_cash;
					that.is_open_account = data.is_open_account;
				}else
				{
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					});
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
				}
			});
		},
		/**
		 * 全部提现
		 */
		totalCash:function()
		{
			var that = this;
			if(that.money > 0)
			{
				that.apply_money = that.money;
			}
		},
		/**
		 * 提现申请
		 */
		applyCashFun:function()
		{
			//console.log('提现申请');
			//console.log('提现申请');
			var that = this;
			let formData = {
				bind_bank_id:Object.keys(that.bind_bank).length > 0 ? that.bind_bank.id : '',
				apply_money:that.apply_money
			};
			//网络请求
			request(app.globalData.api_url+'/v1/moneycash/apply_cash', 'POST', formData).then((res) => {
				uni.showToast({
					title:res.data.msg,
					icon:'none'
				});
				if(res.data.code == 0)
				{
					setTimeout(function(){
						that.load_cash_init(); //获取技师提现初始信息
					}, 1000);
				}else
				{
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
				}
			});
		}
	}
}
</script>
<style lang="scss">
page{
	background-color: $uni-bg-color-grey;
}
.content{
	.record-btn{
		width: 100%;
		text-align: center;
		position: fixed;
		bottom:20rpx;
		left: 0;
		font-size: 28rpx;
		color: $uni-text-color-grey;
	}
	.place-addr{
		margin:30rpx;
		padding:30rpx 70rpx 30rpx 130rpx;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		&::before{
			position: absolute;
			left:30rpx;
			top:25%;
			content:'\e664';
			font-size:80rpx;
			color:#00a0ea;
		}
		&::after{
			position: absolute;
			right:30rpx;
			top:31%;
			content:'\e88e';
			font-size:40rpx;
		}
		.place-name1{
			margin:20rpx 0 30rpx;
			text{
				font-size:30rpx;
				color: $uni-text-color-grey;
			}
		}
		.place-name{
			margin-bottom: 0.3rem;
			text{
				font-size:30rpx;
				font-weight: bold;
			}
		}
		.place-addr-con{
			font-size:28rpx;
		}
	}
	.place-card{
		&::before{
			top:22%;
			content:'\e611';
			font-size:90rpx;
		}
	}
	.order-nav{
		display: flex;
		background-color: #fff;
		text{
			font-size: 28rpx;
			margin: 0 20rpx;
			height:80rpx;
			line-height:80rpx;
			flex: 1;
			text-align: center;
			&.order-act{
				border-bottom:2px solid $uni-text-color-active;
			}
		}
	}
	.with-con{
		margin:30rpx;
		padding:20rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.place-time-tp{
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			border-bottom:1px solid #eee;
			padding-bottom:10rpx;
			margin-bottom:10rpx;
			&:last-child{
				border-bottom: none;
				margin-bottom:0;
			}
			.place-time-name{
				flex: 1;
				font-size:28rpx;
			}
			.place-time-con{
				flex: 2.5;
				vertical-align: middle;
				text{
					&:first-child{
						font-size:28rpx;
						color: $uni-text-color-grey;
					}
					&.place-coupon{
						color: #ff0000;
					}
				}
				label{
					font-size: 28rpx;
					radio{
						transform: scale(0.7);
					}				
				}
				.apply-text{
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
				}
			}
		}
		.with-input{
			.with-input-con{
				line-height:80rpx;
				display: flex;
				&::before{
					content: "￥";
					font-size: 24rpx;
				}
				input{
					flex: 1;
					padding: 0 20rpx;
					height:80rpx;
					font-size:36rpx;
					line-height:60rpx;
					border-bottom:2rpx solid $uni-bg-color-grey;
				}
			}
			.with-pri{
				margin: 20rpx 0;
				font-size: 28rpx;
				text{
					&:last-child{
						margin-left: 20rpx;
						color: $uni-text-color-active;
					}
				}
			}
			.with-tips{
				font-size: 24rpx;
				color: $uni-text-color-grey;
				text{
					color: #f00;
					&::before{
						content: "￥";
					}
				}
			}
			.with-btn{
				margin:30rpx 0 10rpx;
				text-align: center;
				text{
					display: inline-block;
					width:100%;
					height:70rpx;
					line-height: 70rpx;
					border-radius: 35rpx;
					font-size: 28rpx;
					color: #fff;
					background-color: $uni-text-color-active;
				}
			}
		}
		.place-rem-tit{
			font-size: 28rpx;
			margin: 20rpx 0;
			text{
				&:first-child{
					font-weight: bold;
				}
				&:last-child{
					font-size: 24rpx;
					color: $uni-text-color-grey;
				}
			}
		}
	}
}
</style>